<template>
  <!--第二个 -->
  <div class="boxnav paim">
    <ul class="h100">
      <li v-for="(item,index) in rankList" :key="index">
        <span>{{ index+1 }}</span>
        <div class="pmnav">
          <p>{{ item.customer_name }}</p>
          <div class="pmbar"><span :style="{ width: item.total_count + '%' }"></span><i>{{ item.total_count }}</i></div>
        </div>
      </li>
      <!-- <li>
        <span>2</span>
        <div class="pmnav">
          <p>景小</p>
          <div class="pmbar"><span id="two"></span><i>26</i></div>
        </div>
      </li>
      <li>
        <span>3</span>
        <div class="pmnav">
          <p>科大</p>
          <div class="pmbar"><span id="three"></span><i>19</i></div>
        </div>
      </li>
      <li>
        <span>4</span>
        <div class="pmnav">
          <p>洛一高</p>
          <div class="pmbar"><span id="four"></span><i>16</i></div>
        </div>
      </li>
      <li>
        <span>5</span>
        <div class="pmnav">
          <p>湖北路小学</p>
          <div class="pmbar"><span id="five"></span><i>14</i></div>
        </div>
      </li> -->
    </ul>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted, toRef } from "vue";
import { useOverviewStore } from "/@/store/index.ts";
const overviewStore = useOverviewStore();

let rankList = ref({});

overviewStore.$subscribe((mutation, state) => {
  rankList.value = state.overviewData.ranking_list;
});

async function initRank() {
  // 获取 div 元素
  var div = document.getElementById("one");
  div.style.width = "100%";

  var div = document.getElementById("two");
  div.style.width = "50%";

  var div = document.getElementById("three");
  div.style.width = "37%";

  var div = document.getElementById("four");
  div.style.width = "31%";

  var div = document.getElementById("five");
  div.style.width = "27%";
}

onMounted(async () => {
  // await initRank();
});
</script>

<style lang="scss" scoped>
.boxnav {
  height: 300px;
  margin-left: -25px;
  width: 100%;
}
.h100 {
  margin-top: -1.5px;
}

// 颜色方块
.paim li > span {
  width: 50px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  background: #878787;
  border-radius: 10px;
  margin-right: 15px;
  margin-top: 10px;
  font-size: 18px;
}

.paim li:nth-child(1) > span {
  background: #ed405d;
}
.paim li:nth-child(2) > span {
  background: #f78c44;
}
.paim li:nth-child(3) > span {
  background: #49bcf7;
}
// 每一行多高
.paim li {
  display: flex;
  align-items: center;
  height: 60px;
}

.pmbar {
  position: relative;
  display: flex;
}

// Rank 进度条
.pmbar span {
  background: linear-gradient(to right, #14b6ff, #9cefff);
  display: inline-block;
  vertical-align: middle;
  height: 12px;
  border-radius: 30px;
  margin-top: -10px;
}

// 进度数字
.pmbar i {
  line-height: -0px;
  font-style: normal;
  padding-left: 10px;
  color: #49bcf7;
  margin-top: -5px;
}

.pmnav {
  width: 100%;
}

// 标题
.pmnav p {
  color: #fff;
  opacity: 0.8;
  font-size: 18px;
  padding-bottom: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 5px;
}
</style>